import { Button, Form, Input, Radio, message } from 'antd';
import { Link } from 'react-router-dom';
import Styles from '../../assets/styles/login.module.less';
import { telApi, shopnameApi, addShopApi } from '../../apis/loginApi';
import React, { useState } from 'react';
import IdCardImg from './components/idCardImg';
import IicenceImg from './components/licenceImg';

export default function login() {
  const [telValue, setTelValue] = useState();
  const [idCardImg, setIdCardImg] = useState();
  const [licenceImg, setIicenceImg] = useState();
  const [registerForm] = Form.useForm();

  //身份证照片
  const getIdCardImg = (fileName: any) => {
    registerForm.setFieldValue('idCardImg', fileName);
  };
  //营业执照
  const getLicenceImg = (fileName: any) => {
    registerForm.setFieldValue('licenceImg', fileName);
  };

  //提交商家入驻
  const onFinish = async (val: any) => {
    console.log('1233' + val);
    const data = {
      shopName: val.shopName,
      tel: val.tel,
      address: val.address,
      idCard: val.idCard,
      managerName: val.managerName,
      licenceNo: val.licenceNo,
      type: val.type,
      licenceImg: val.licenceImg,
      idCardImg: val.idCardImg,
    };
    // console.log(data);
    //调取接口
    const res = await addShopApi(data);
    // console.log(res);
    message.success('入驻成功！');
  };

  return (
    <div className={Styles.loginContainer}>
      <div className={Styles.loginContent}>
        <div className={Styles.loginContentTop}>
          <h3>阿杰养车</h3>
          <p>{idCardImg}</p>
        </div>
        <div className={Styles.loginContentMain}>
          <Form
            form={registerForm}
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            // onValuesChange={onValuesChange}
          >
            <Form.Item
              name="type"
              label="店铺类型"
              rules={[{ required: true }]}
            >
              <Radio.Group>
                <Radio value="0">充电桩</Radio>
                <Radio value="1">其他</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name="shopName"
              label="店铺名"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item name="tel" label="手机号" rules={[{ required: true }]}>
              <Input value={telValue} />
            </Form.Item>
            <Form.Item
              name="address"
              label="店铺地址"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="managerName"
              label="注册人"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="idCard"
              label="身份证号"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="idCardImg"
              label="身份证照片"
              rules={[{ required: true }]}
            >
              <IdCardImg
                getIdCardImg={getIdCardImg}
                value={idCardImg}
              ></IdCardImg>
            </Form.Item>
            <Form.Item
              name="licenceNo"
              label="营业执照编号"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="licenceImg"
              label="营业执照照片"
              rules={[{ required: true }]}
            >
              <IicenceImg
                getLicenceImg={getLicenceImg}
                value={licenceImg}
              ></IicenceImg>
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              立即申请
            </Button>
            <Link to="/login">使用已有账号登录</Link>
          </Form>
        </div>
      </div>
    </div>
  );
}
